<!-- 个人信息设置 -->
<template>
  <div class="setting-container">
    <van-nav-bar title="个人设置" left-arrow @click-left="onClickLeft" />
    <div class="user-avater">
      <div class="user-avater-main">
        <van-image round width="6rem" height="6rem" :src="state.head" />
        <p>{{ userName }}</p>
      </div>
    </div>
    <van-cell-group>
      <van-cell
        title="昵称"
        is-link
        :value="nickName"
        @click="updateInfo(1)"
      ></van-cell>
      <van-cell
        title="年龄"
        is-link
        :value="userAge"
        @click="updateInfo(2)"
      ></van-cell>
      <!-- <van-cell title="邀请码"> -->
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <!-- <template #right-icon> wrqwer </template>
      </van-cell> -->
    </van-cell-group>
    <div class="footer-bottom-btn">
      <van-button @click="loginOut()">退出登录</van-button>
    </div>
  </div>
  <van-dialog
    v-model:show="isDiaShow"
    :title="title"
    show-cancel-button
    :before-close="confirm"
  >
    <div class="field-main">
      <van-field
        label-width="32"
        v-model="fieldValue"
        :name="fieldName"
        :label="fieldName"
        :type="fieldType"
        :placeholder="'请输入' + fieldName"
      />
    </div>
  </van-dialog>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import icon_hand from "@/assets/image/icon_hand3.png";
import Img10 from "@/assets/image/img10.png";
import Img11 from "@/assets/image/img11.png";
import head from "@/assets/image/icon_hand1.png";
import { showConfirmDialog, Toast, showToast } from "vant";

const route = useRoute();
const router = useRouter();
const state = reactive({
  icon_hand,
  Img10,
  Img11,
  head,
});

let userName = ref("");
let nickName = ref("");
let userAge = ref("");

const onClickLeft = () => {
  router.go(-1);
};

const beforeClose = (action) =>
  new Promise((resolve) => {
    console.log(action, "action");
    if (action !== "confirm") {
      resolve(true);
    } else {
      localStorage.clear("token");
      localStorage.clear("userInfo");
      showToast("退出成功");
      router.push({
        name: "login",
        query: {
          types: 1,
        },
      });
      resolve(true);
    }
    setTimeout(() => {
      resolve(action === "confirm");
    }, 1000);
  });

const loginOut = () => {
  showConfirmDialog({
    title: "退出",
    message: "确认退出吗？",
    beforeClose,
  });
};

let fieldValue = ref("");
let title = ref("修改密码");
let fieldName = ref("昵称");
let isDiaShow = ref(false);
let fieldType = ref("text");

const updateInfo = (types) => {
  title.value = types == 1 ? "修改昵称" : "修改年龄";
  fieldName.value = types == 1 ? "昵称" : "年龄";
  fieldType.value = types == 1 ? "text" : "digit";
  isDiaShow.value = true;
};

import { updateMember, getUserInfo } from "@/api/user";

const getUserInfoData = async () => {
  let { data } = await getUserInfo();
  localStorage.setItem("userInfo", JSON.stringify(data));
  console.log(data, "123");
};

const confirm = (action) =>
  new Promise(async (resolve) => {
    if (action !== "confirm") {
      fieldValue.value = null;
      resolve(true);
    } else {
      let params = {};
      if (!fieldValue.value) {
        let msg = "请输入" + fieldName.value;
        console.log(fieldName.value);
        resolve(false);
        showToast(msg);
        return;
      }
      if (title.value == "修改昵称") {
        params.nickname = fieldValue.value;
      } else {
        params.age = Number(fieldValue.value);
      }
      try {
        let data = await updateMember(params);
        if (title.value == "修改昵称") {
          nickName.value = fieldValue.value;
          showToast("昵称修改成功");
        } else {
          userAge.value = fieldValue.value;
          showToast("年龄修改成功");
        }
        getUserInfoData();
        resolve(true);
        fieldValue.value = null;
      } catch (error) {
        resolve(false);
      }
    }
    setTimeout(() => {
      resolve(action === "confirm");
    }, 1000);
  });

onMounted(() => {
  let s = localStorage.getItem("userInfo");
  if (s) {
    let userInfo = JSON.parse(s);
    console.log(userInfo, "userInfo");
    userName.value = userInfo.username;
    nickName.value = userInfo.nickname;
    userAge.value = userInfo.age;
  }
});
</script>



<style lang="scss" scoped>
input {
  border: none;
  text-align: right;
}
.user-avater {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
  p {
    text-align: center;
    color: #666;
  }
}
.field-main {
  padding: 20px 0;
}
.footer-bottom-btn {
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  .van-button {
    background: #fafafa;
    border: none;
  }
}
.setting-container {
  background: #fff;
  min-height: 100vh;
}
</style>
